<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>相册管理</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <script type="text/html" id="tableBar">
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">
                    <i class="layui-icon layui-icon-add-1">添加</i>
                </button>
            </script>
            <table class="layui-table" id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="toolbar">
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="detail">
                    <i class="layui-icon layui-icon-edit">查看</i>
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-text" lay-event="remove">
                    <i class="layui-icon layui-icon-delete">删除</i>
                </button>
            </script>
        </div>
    </div>
</div>
<div class="layui-form" style="display: none;padding:20px 20px" id="dataForm" lay-filter="dataForm">
    <div class="layui-form-item">
        <label class="layui-form-label">选择文件</label>
        <div class="layui-input-block">
            <button class="layui-btn" id="uploadBtn">点击上传</button>
        </div>
    </div>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px">
        预览图：
        <div class="layui-upload-list" id="bannerList"></div>
    </blockquote>
    <div class="layui-form-item layui-hide">
        <button lay-submit lay-filter="saveBtn" id="saveBtn"></button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(["table", "form", "upload"], () => {
        const table = layui.table, form = layui.form, $ = layui.$;

        const upload = layui.upload;

        const cols = [[
            {type: "numbers"},
            /*{
                title: "图片预览", templet: d => {
                    return `<img src="` + d.path + `" alt=""/>`
                }
            },*/

            {title: "图片路径", field: "posterPath"},
            {title: "创建时间", field: "createTime"},
            {title: "修改时间", field: "updateTime"},
            {title: "操作栏", toolbar: "#toolbar", fixed: "right"}
        ]];

        const dataTable = table.render({
            elem: "#dataTable",
            height: "700px",
            toolbar: "#tableBar",
            id: "dataTable",
            page: false,
            url: ctx + "clubPicture/poster/showPoster",
            cols: cols
        });

        const detailPicture = (url) => {
            $("#bannerList").empty()
            $("#bannerList").append(`<img src="` + url + `" alt="" class="layui-upload-img" width="200px" height="200px"/>`)
        }


        let fileList = [];
        table.on("toolbar(dataTable)", ({event}) => {
            switch (event) {
                case "add":
                    $("#bannerList").empty();
                    fileList = []
                    openDataForm(() => {
                        $("#saveBtn").click();
                    })
                    break;
                default:
                    return false;
            }
        })

        table.on("tool(dataTable)", (obj) => {
            const {event, data} = obj;
            switch (event) {
                case "remove":
                    layer.confirm("确定删除该图吗？", () => {
                        $.ajax({
                            url: ctx + "clubPicture/poster/" + data.posterId,
                            method: "delete",
                            success: ({code, msg}) => {
                                if (code !== 0) {
                                    return layer.msg(msg, {icon: 5})
                                }
                                dataTable.reload();
                                layer.closeAll();
                            }
                        })
                    })
                    break;
                case "detail":
                    detailPicture(data.posterPath);
                    openDataForm(() => {
                    })
                    break;
                default:
                    return false;
            }
        })

        const openDetailPicture = resolve => {
            layer.open({
                type: 1,
                content: $("#dataForm"),
                area: ["700px", "700px"],
                btn: ["确定", "取消"],
                btnAlign: "c",
                yes: resolve
            })
        }

        const openDataForm = resolve => {
            layer.open({
                type: 1,
                title: "上传轮播图",
                content: $("#dataForm"),
                area: ["900px", "600px"],
                btn: ["确定", "取消"],
                btnAlign: "c",
                yes: resolve
            })
        }
        upload.render({
            elem: "#uploadBtn",
            url: ctx + "clubPicture/poster/uploadFile",
            multiple: true,
            accept: "images",
            acceptMime: "image/*",
            before: obj => {
                obj.preview((index, file, result) => {
                    $("#bannerList").append(`<img src="` + result + `" alt="" class="layui-upload-img" width="200px" height="200px"/>`)
                })
            },
            done: ({code, data, msg}) => {
                if (code !== 0) {
                    return layer.msg(msg, {icon: 5})
                }
                fileList.push(data);
            },
            error: () => {

            }
        })

        form.on("submit(saveBtn)", data => {
            const loadIndex = layer.load();
            $.ajax({
                url: ctx + "clubPicture/poster/save",
                method: "post",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(fileList),
                success: ({code, data, msg}) => {
                    layer.close(loadIndex);
                    if (code !== 0) {
                        return layer.msg(msg, {icon: 5})
                    }
                    dataTable.reload();
                    layer.closeAll();
                }
            })
        })
    })
</script>
</body>
</html>